<!doctype html>
<html>
<head>
 <title>IE7 {CSS2: auto}</title>
 <!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="../trunk/lib/IE9.js"></script><![endif]-->
 <style>
  #box1, #box2 {
   position: fixed;
   border: black 5px solid;
   left: 20em;
   right: 40px;
   top: 15px;
   height: 120px;
   margin: auto;
  }
  #box1 {background: red;}
  #box2 {background: blue; width: 200px;}
  #relative {
  	position: relative;
	width: 600px;
	background: green;
	padding: 5px;
	color: white;
  }
 </style>
</head>
<body>
 <h2>left/right/fixed</h2>
 <div id="box1">I&#8217;m a very colorful bug!</div>
 <p>&lt;&nbsp;<a href="javascript:history.back()">back</a></p>
 <div id="relative"><div id="box2">This should be the only colored box on the screen.
  It should be positioned to the viewport, not the containing element.</div>relative
  positioned box.</div>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>ghfh
</body>
</html>
